﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PieIndex.aspx.cs" Inherits="UI.Module.Statistical.PieIndex" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>酒聚汇投资者查看平台-销售占比分析</title>
    <script src="../../js/jquery-1.7.2.min.js"></script>
    <script src="../../js/highcharts.js"></script>
    <script>
        $(function () {
            $.ajax({
                type: "Post",
                url: "json/getPieJson.aspx",
                data: "date=" + $("#ddlistdate").val() + "&shopid=" + $("#ddlistShop").val(),
                success: function (result) {
                    if (result == "") {
                        alert("该门店无可加载数据!");
                        return;
                    }
                    load(result);
                }
            });
            $("#ddlistShop").change(function () {
                $.ajax({
                    type: "Post",
                    url: "json/getPieJson.aspx",
                    data: "date=" + $("#ddlistdate").val() + "&shopid=" + $(this).val(),
                    success: function (result) {
                        if (result == "") {
                            alert("该门店无可加载数据!");
                            return;
                        }
                        load(result);
                    }
                });
            });
        });
        function load(json) {
            $('#container').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: '月销售类别占比情况, ' + $("#ddlistdate").val()
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: '销售额占比',
                    data: eval(json)
                }]
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <h2 class="mbx">当前门店:
            <asp:DropDownList ID="ddlistShop" runat="server"></asp:DropDownList></h2>
        <h2 class="mbx">当前月份:
            <asp:DropDownList ID="ddlistdate" runat="server"></asp:DropDownList></h2>
        <div id="container" style="min-width: 500px; min-height: 760px; margin: 0 auto"></div>
    </form>
</body>
</html>
